<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性的操作</title>
		<!-- 元素属性操作：针对元素中属性
		      元素： 固定属性    attr() removeAttr() 针对元素自带属性，捆绑型
			        附加属性    porp() removeAttr() 针对表单元素，附加型
					 特点：固定属性和附加属性【两对函数使用方式一样】
			prop()           功能：表单元素：input元素，添加获取属性值的方法
			                 有参：传1个值
							 功能：表单元素当中附加属性【checked,disabled】
							       input元素中属性checked添加bool布尔值，
								   获取input元素中属性checkedde的布尔值【是否选中状态】
							 语法：prop("属性值")
							       传2个值
							 语法：prop("属性","属性值:bool")	 
							 功能：设置input元素中属性状态【true设置选中，flase未选中】  
			removeProp()		 
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>prop()函数与removeProp()函数使用</h1>
		<!-- 复选框 id="myCheckbox" checked选中-->
		学生<input type="checkbox" id="myCheckbox" checked/>
		<button id="getPropBtn">获取属性</button>
		<button id="setPropBtn">设置属性</button>
		<button id="removePropBtn">移除属性</button>
		<div id="output"></div>
		<script>
			//1.获取属性值---点击getPropBtn---获取input元素中checked值【布尔型】
			//                           output提示：获取的checked的值是+变量
			$("#getPropBtn").click(function(){
				var mcb=$("#myCheckbox").prop("checked");
				$("#output").text("获取的checked的值是："+mcb)
			});
			//2.设置属性值---实现多选勾掉
			$("#setPropBtn").click(function(){
				$("#myCheckbox").prop("checked",false)
			    $("#output").text("消失");
			});
			//3.移除属性---实现多选勾掉
			$("#removePropBtn").click(function(){
				$("#myCheckbox").removeProp("checked");
				$("#output").text("input元素的checked属性已移除");
			});
		</script>
	</body>
</html>